<template>
  <div v-if="currentData">
    <baiwan-dialog :visible="dialogVisible" :title="currentData.coinName+'提币'" :before-close="handleClose">
      <div class="charge-dialog">
        <div class="baiwan-dialog-cont">
          <div>
            <label for="" v-if="userInfo&&userInfo.userName">账号验证：{{userInfo.email}}</label>
            <span class="special">
              <input type="text" v-model="code">
              <span class="special-all special-all-max" @click="getCode">{{phoneCodemsg}}</span>
            </span>
          </div>
          <div>
            <label for="">提币地址</label>
            <span><input type="text" v-model="mentionAddress"></span>
          </div>
          <div>
            <label for="">提币数量</label>
            <span class="special">
              <input type="text" v-model="mentionNum">
              <span class="special-all" @click="handleAll">全部</span>
            </span>
          </div>
        </div>
        <div class="mention-num">
          <label for="">手续费：</label>
          <span>0.01</span>
        </div>
        <!--<div class="mention-num">-->
        <!--<label for="">实际到账：</label>-->
        <!--<span>11111</span>-->
        <!--</div>-->
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="baiwan-dialog-btn" @click="handleMentionaction">提币</div>
      </span>
    </baiwan-dialog>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Dialog from '@/components/dialog'
  import Api from '@/axios'

  export default {
    name: 'charge-dialog',
    data() {
      return {
        mentionNum: 0,
        mentionAddress: '',
        code: '',
        dialogVisible: false,
        codeTimer: null,
        handeleCode: false,
        phoneCodemsg: '发送验证码',
        countdown: 60,
        currentData: null
      }
    },
    components: {
      'baiwan-dialog': Dialog
    },
    props: ['visible', 'changeData'],
    watch: {
      visible: 'checkVisible'
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo
      }
    },
    methods: {
      getCode() {
        let self = this
        if (self.countdown !== 60) return false
        if (!self.userInfo || !self.userInfo.userName) return false
        let params = {
          receiver: self.userInfo.email
        }
        Api.sendCode(params).then(res => {
          let result = res.data
          if (result.code === 0) {
            self.handleCountdown()
            Toast.success('发送成功')
          } else {
            Toast.fail(result.message)
          }
        })
      },
      handleCountdown() {
        let self = this
        if (self.countdown !== 60) return false
        self.handeleCode = !self.handeleCode
        if (!self.handeleCode) return false
        self.phoneCodemsg = self.countdown + 's后重新获取'
        clearInterval(self.codeTimer)
        self.codeTimer = setInterval(() => {
          self.countdown = self.countdown - 1
          if (self.countdown > 0) {
            self.phoneCodemsg = self.countdown + 's后重新获取'
          } else {
            self.countdown = 60
            self.phoneCodemsg = '发送验证码'
            self.handeleCode = false
            clearInterval(self.codeTimer)
          }
        }, 1000)
      },
      checkVisible() {
        this.currentData = this.changeData
        this.dialogVisible = true
      },
      handleAll() {
        this.mentionNum = this.currentData.amount
      },
      handleMentionaction() {
        if (!this.code) {
          Toast.fail('验证码不能为空！')
          return false
        }
        let params = {
          address: this.mentionAddress,
          amount: this.mentionNum,
          code: this.code
        }
        if (params.amount > this.currentData.amount) {
          Toast('申请金额不能大于可用余额！')
        } else {
          Api.transferOut(params).then(res => {
            let result = res.data
            if (result.code === 0) {
              this.dialogVisible = false
              this.$emit('retrieveData')
              this.currentData = null
              this.code = null
              this.mentionNum = 0
              Toast.success('提币成功！')
            } else {
              Toast(result.message)
            }
          })
        }
      },
      handleClose() {
        this.phoneCodemsg = '发送验证码'
        clearInterval(this.codeTimer)
        this.dialogVisible = false
      }
    },
    mounted() {
      this.currentData = this.changeData
      this.dialogVisible = this.visible
    }
  }
</script>

<style lang="less" scoped>
  .charge-dialog {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    .baiwan-dialog-cont {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      margin: 44px 0;
      > div {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        margin-bottom: 10px;
        > label {
          width: 100%;
          height: auto;
          line-height: 40px;
          display: block;
          overflow: hidden;
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #FFFFFF;
          text-align: justify;
          margin: 20px 0;

        }
        > span {
          position: relative;
          width: 100%;
          height: 68px;
          display: block;
          overflow: hidden;
          > input {
            width: 100%;
            height: 68px;
            line-height: 66px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: 2px solid #F1D487;
            box-sizing: border-box;
            border-radius: 10px;
            background: #1E3054;
            font-size: 26px;
            color: #FFFFFF;
            text-align: justify;
            text-indent: 16px;
          }
        }
        .special {
          /*padding-right: 40px;*/
          /*box-sizing: border-box;*/
          .special-all {
            position: absolute;
            right: 2px;
            top: 10px;
            width: 90px;
            height: 46px;
            line-height: 45px;
            text-align: center;
            border-left: 1px solid #FFFFFF;
            background: #1E3054;
            font-size: 26px;
            color: #FFFFFF;
          }
          .special-all-max {
            width: 185px;
          }
        }
      }

    }
    .mention-num {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      margin-bottom: 10px;
      padding-left: 110px;
      box-sizing: border-box;
      font-family: PingFangSC-Regular;
      font-size: 22px;
      color: #FFFFFF;
      > label {
        position: absolute;
        left: 0;
        top: 0;
        width: 110px;
        display: block;
        overflow: hidden;
      }
      > span {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
      }

    }
  }

</style>
